<template>
  <div style="height: 100%">
    <div style="color: #fa7355; margin-bottom: 20px">
      每个合同签署成功后会自动创建一个一般户下的虚拟子账户，用于该合同的进度款收款。
    </div>
    <div style="height: calc(100% - 103px)">
      <el-table
        :data="tableData"
        class="table"
        height="100%"
        border
        tooltip-effect="light"
        ref="jdjgTable"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="户名" align="center" prop="accountName" width="140"> </el-table-column>
        <el-table-column label="开户银行" align="center" prop="bankName" width="160" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="银行账号" align="center" prop="bankAccount" show-overflow-tooltip width="160">
        </el-table-column>
        <el-table-column label="管理合同-对应工程" align="center" prop="phone" width="160" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="合同总额" align="center" prop="contractMoney" width="160"> </el-table-column>
        <el-table-column label="累积收款" align="center" prop="settlementAmount" width="160" fixed="right">
        </el-table-column>
      </el-table>
    </div>
    <div class="pags">
      <element-pagination @getData="getPagChange" :Total="total" :pageSize="[10, 30, 50, 100]"> </element-pagination>
    </div>
  </div>
</template>

<script>
import ElementPagination from '@/components/ElementPagination.vue'
export default {
  props: {
    id: {
      type: [String, Number],
      require: true
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      size: 10,
      page: 1
    }
  },
  components: { ElementPagination },
  mounted() {
    if (this.id) {
      this.getData()
    }
  },
  methods: {
    addIndex(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/bankAccount/listVirtualBankAccountById',
        data: {
          page: this.page,
          size: this.size,
          public_Id: this.id
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
